<template>
    <div class="tab-bar">
        <div class="body">
            <div
                v-for="(item, index) in tabList"
                :key="index"
                class="item"
                @click="changeTab(item, index)"
            >
                <TabBarItem :item="item" :active="curIndex === index" />
            </div>
        </div>
    </div>
</template>

<script>
import TabBarItem from "./tabBarItem";
export default {
    components: {
        TabBarItem
    },
    data() {
        return {
            curIndex: -1,
            tabList: [
                {
                    title: "首页",
                    icon: "home",
                    activeIcon: "home_active",
                    path: "/home/index"
                },
                {
                    title: "发现",
                    icon: "discover",
                    activeIcon: "discover_active",
                    path: "/discover/index"
                },
                {
                    title: "社区",
                    icon: "community",
                    activeIcon: "community_active",
                    path: "/community/index"
                },

                {
                    title: "我的",
                    icon: "profile",
                    activeIcon: "profile_active",
                    path: "/profile/index"
                }
            ]
        };
    },

    watch: {
        $route: function(r) {
            // console.log("watch", r.path);
            this.updateActiveTab();
        }
    },

    created() {
        this.updateActiveTab();
    },

    methods: {
        changeTab(item, index) {
            if (index === this.curIndex) {
                return;
            }
            this.$router.replace({
                path: `${item.path}`,
                query: this.$route.query
            });
        },
        updateActiveTab() {
            this.tabList.forEach((tab, index) => {
                if (tab.path === this.$route.path) {
                    this.curIndex = index;
                }
            });
        }
    }
};
</script>


<style lang="less" scoped>
.tab-bar {
    position: fixed;
    z-index: 1000;
    bottom: 0;
    width: 100%;
    height: 100px;
    box-shadow: 0 0 10px rgba(100, 100, 100, 0.2);
    box-sizing: border-box;
    background: #fff;

    .body {
        display: flex;
        width: 100%;
        height: 100%;

        .item {
            flex: 1 1 auto;
        }
    }
}
</style>